<template>
  <div style="margin: 10px 0">
    <el-text style="margin: 5px">订单编号:</el-text>
    <el-input v-model="search" style="width: 7%" placeholder="请输入" clearable/>
    <el-text style="margin: 5px">用户账号:</el-text>
    <el-input v-model="username" style="width: 7%" placeholder="请输入" clearable/>
    <el-text style="margin: 5px">订单状态:</el-text>
    <el-select v-model="state" placeholder="请选择" style="width: 100px" clearable>
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    <el-button type="primary"  @click="empty">清空</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="orderId" sortable label="订单编号"/>
    <el-table-column prop="userName" label="用户账号"/>
    <el-table-column prop="flowerName" label="商品名称"/>
    <el-table-column prop="quantity" label="购买数量"/>
    <el-table-column prop="orderDate" label="订单时间"/>
    <el-table-column prop="orderStatus" label="订单状态">
      <template #default="scope">
        <span :style="{ color: getStatusColor(scope.row.orderStatus), fontWeight:'bold ' }">{{ scope.row.orderStatus }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="totalAmount" label="订单总金额"/>
    <el-table-column prop="addressee" label="收件人"/>
    <el-table-column prop="phoneNumber" label="联系电话"/>
    <el-table-column prop="deliveryAddress" label="收货地址"/>

    <el-table-column fixed="right" label="操作" width="100vh">
      <template #default="scope">
        <el-button link type="warning" @click="handleEdit(scope.row)" :disabled="primary(scope.row.orderStatus)" >发货</el-button>
        <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.orderId)">
          <template #reference>
            <el-button type="text" style="color: red" :disabled="pdelete(scope.row.orderStatus)" v-if="str.role === '管理员'">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <div style="margin: 10px 0">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.pagination {
  width: 400px; /* 或者设置一个具体的宽度，比如300px */
  margin: 30px auto; /* 水平居中 */
  text-align: center;
}
</style>

<script>
import request from "@/utils/request";
import router from "@/router";

export default {
  name: 'Order',
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      input: '',
      search: '',
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 10,
      tableData: [],
      str:{},
      state:'',
      username:'',
      options:[
        {value:'未发货',label:'未发货'},
        {value:'已发货',label:'已发货'},
        {value:'已完成',label: '已完成'}
      ],
    }
  },
  created() {
    this.str = JSON.parse(localStorage.getItem("xm-pro-employee"))
    this.load()
  },
  methods: {
    filesUploadSuccess(res){
      console.log(res)
      this.form.avatar = res.data
    },
    getStatusColor(status) {
      // 根据状态返回相应的颜色
      switch (status) {
        case '已发货':
          return 'blue';
        case '已完成':
          return 'green';
        case '未发货':
          return 'red';
        default:
          return 'black'; // 默认颜色
      }
    },
    primary(status){
      switch (status) {
        case '已发货':
          return true;
        case '已完成':
          return true;
        case '未发货':
          return false;
        default:
          return false;
    }
    },
    pdelete(status){
      switch (status) {
        case '已完成':
          return false;
        default:
          return true;
      }
    },
    load() {
      request.get("/order/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          state: this.state,
          username:this.username
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    empty() {
      this.search='';
      this.state='';
      this.username='';
      this.load()
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      request.put("/order/shipments", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("发货成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleDelete(orderId) {
      request.delete("/order/" + orderId).then(res => {
        if (res.code === '0') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleSizeChange() {
      this.load()
    },
    handleCurrentChange() {
      this.load()
    }
  }
}
</script>